<template>
  <div class="earlyWarn">
    <div class="earlyWarn_search">
      <span style="margin-right:10px">所属地区:</span>
      <span style="margin-right:30px">
        <el-select v-model="form.area" clearable placeholder="请选择地区">
          <el-option
            v-for="item in areaOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </span>
      <span style="margin-right:10px">统计时间:</span>
      <span>
        <el-date-picker
          v-model="form.timeRange"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        />
      </span>
      <span style="margin-left:10px">
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="danger">重置</el-button>
      </span>
    </div>
    <div class="earlyWarn_body">
      <div class="earlyWarn_body_title">
        假劣药药品排行
      </div>
      <div style="height:calc(50vh)">
        <VEcharts
          ref="chartClass1"
          autoresize
          :options="dataConfig"
          class="chartClass"
          style="width:100%;height:90%"
        />
      </div>

      <div class="earlyWarn_body_title">
        假劣药生产企业排行
      </div>
      <div style="height:calc(50vh)">
        <VEcharts
          ref="chartClass2"
          autoresize
          :options="dataConfig1"
          class="chartClass"
          style="width:100%;height:90%"
        />
      </div>
      <div class="earlyWarn_body_title">
        药店采购假劣药排行
      </div>
      <div style="height:calc(50vh)">
        <VEcharts
          ref="chartClass2"
          autoresize
          :options="dataConfig2"
          class="chartClass"
          style="width:100%;height:90%"
        />
      </div>
    </div>
  </div>
</template>

<script>
import VEcharts from '@/components/vecharts';
import { getQueryBodyByProduce } from '@/api/dynamicInterface/index.js';
export default {
  components: {
    VEcharts
  },
  data() {
    return {

      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      commonDataConfig: {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        label: { // 柱体上显示数值
          show: true, // 开启显示
          position: 'top', // 在上方显示
          textStyle: {// 数值样式
            fontSize: '7px',
            color: '#666'
          }
        },
        series: [{
          data: [],
          type: 'bar',
          barWidth: '40%'

        }],
        xAxis: {
          type: 'category',
          data: []

        },
        yAxis: {
          type: 'value'
        }
      },
      dataConfig: {},
      dataConfig1: {},
      dataConfig2: {},
      form: {
        area: '',
        timeRange: ''
      },
      areaOptions: [
        {
          value: '绍兴市',
          label: '绍兴市'
        }, {
          value: '越城区',
          label: '越城区'
        },
        {
          value: '柯桥区',
          label: '柯桥区'
        },
        {
          value: '上虞区',
          label: '上虞区'
        }, {
          value: '诸暨市',
          label: '诸暨市'
        },
        {
          value: '新昌县',
          label: '新昌县'
        },
        {
          value: '嵊州市',
          label: '嵊州市'
        }
      ]
    };
  },

  created() {
    this.getQueryBodyByProduce();
  },
  methods: {
    search() {
      this.getQueryBodyByProduce();
    },
    getQueryBodyByProduce() {
      this.dataConfig = JSON.parse(JSON.stringify(this.commonDataConfig));
      this.dataConfig1 = JSON.parse(JSON.stringify(this.commonDataConfig));
      this.dataConfig2 = JSON.parse(JSON.stringify(this.commonDataConfig));
      getQueryBodyByProduce({
        cprogramname: '',
        filterList: [],
        pageIndex: 0,
        pageSize: 100000,
        pageType: 1,
        tableId: 655
      }).then(res => {
        if (res.success) {
          const members = res.data.sort((a, b) => b.Sl - a.Sl);
          members.map(o => {
            if (o.cType === '假劣药药品排行') {
              this.dataConfig.series[0].itemStyle = {
                normal: {
                  // 这里是重点
                  color: function(params) {
                    // 注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                    var colorList = ['#7078ca', '#5acdf8', '#89cf67', '#f7b54d', '#ef6c42', '#999690', '#8187d1', '#60d3f9', '#99d578', '#f8bf6d'];
                    return colorList[params.dataIndex];
                  }
                }
              };
              this.dataConfig.xAxis.axisLabel = {
                interval: 0,
                rotate: 20 // 代表逆时针旋转45度
              };
              this.dataConfig.xAxis.data.push(o.cName);
              this.dataConfig.series[0].data.push(o.Sl);
            } else if (o.cType === '假劣药生产企业排行') {
              this.dataConfig1.series[0].itemStyle = {
                normal: {
                  // 这里是重点
                  color: function(params) {
                    // 注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                    var colorList = ['#7078ca', '#5acdf8', '#89cf67', '#f7b54d', '#ef6c42', '#999690', '#8187d1', '#60d3f9', '#99d578', '#f8bf6d'];
                    return colorList[params.dataIndex];
                  }
                }
              };

              this.dataConfig1.xAxis.axisLabel = {// 坐标轴刻度标签的相关设置。
                formatter: function(params) {
                  var newParamsName = '';// 最终拼接成的字符串
                  var paramsNameNumber = params.length;// 实际标签的个数
                  var provideNumber = 4;// 每行能显示的字的个数
                  var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                  /**
                             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                             */
                  // 条件等同于rowNumber>1
                  if (paramsNameNumber > provideNumber) {
                    /** 循环每一行,p表示行 */
                    for (var p = 0; p < rowNumber; p++) {
                      var tempStr = '';// 表示每一次截取的字符串
                      var start = p * provideNumber;// 开始截取的位置
                      var end = start + provideNumber;// 结束截取的位置
                      // 此处特殊处理最后一行的索引值
                      if (p === rowNumber - 1) {
                        // 最后一次不换行
                        tempStr = params.substring(start, paramsNameNumber);
                      } else {
                        // 每一次拼接字符串并换行
                        tempStr = params.substring(start, end) + '\n';
                      }
                      newParamsName += tempStr;// 最终拼成的字符串
                    }
                  } else {
                    // 将旧标签的值赋给新标签
                    newParamsName = params;
                  }
                  // 将最终的字符串返回
                  return newParamsName;
                }

              };
              this.dataConfig1.xAxis.data.push(o.cName);
              this.dataConfig1.series[0].data.push(o.Sl);
            } else if (o.cType === '药店采购假劣药排行') {
              this.dataConfig2.xAxis.axisLabel = {
                interval: 0,
                rotate: 20 // 代表逆时针旋转45度
              };
              this.dataConfig2.series[0].itemStyle = {
                normal: {
                  // 这里是重点
                  color: function(params) {
                    // 注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                    var colorList = ['#7078ca', '#5acdf8', '#89cf67', '#f7b54d', '#ef6c42', '#999690', '#8187d1', '#60d3f9', '#99d578', '#f8bf6d'];
                    return colorList[params.dataIndex];
                  }
                }
              };
              this.dataConfig2.xAxis.data.push(o.cName);
              this.dataConfig2.series[0].data.push(o.Sl);
            }
          });
          console.log(this.dataConfig);
        }
      });
    }
  }
};

</script>

<style scoped  lang='scss'>
  .earlyWarn{
    padding:20px
  }
  .earlyWarn_search{
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
  }
  .earlyWarn_body{
    margin-top: 10px;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
  }
  .earlyWarn_body_title{
    padding: 5px;
    border-bottom: 1px solid #a09696;
    font-size: 15px;
    font-weight: bolder;
    color: black
  }

</style>
